<style>
    div.inline { 
        float:left; 
        padding: 5px;
        font-size: 14px;
        font-family: Helvetica;
    }
    .clearBoth { clear:both; }
    img {
        background: repeating-conic-gradient(#292929 0% 25%, #424242 0% 50%) 
              50% / 25px 25px;
        border-width: 0px;
        border: none;
    }
    #tooltip { 
        text-align:center; 
        background:black; 
        color:white; 
        padding:3px 0; 
        width:60px; 
        position:fixed; 
        display:none; 
        white-space:nowrap; 
        font-size: 12px;
    }
    body {
        background-color: #292929;
        color: white;
    }
</style>
<span style="color: #e2e2e2; text-decoration: underline; font-family: Helvetica">{{ FILE_PATH }}</span>
<br>
<div class="inline">
    <img class="img coords" src="{{ IMAGE_URL }}" width="500px"/>
</div>
<div class="inline">
    <ul style="list-style-type:none; overflow-wrap: break-word; word-wrap: break-word; white-space: normal !important">
        <li>Name: {{ NAME }}</li>
        <li>Type: {{ MIMETYPE }}</li>
        <li>Size: {{ FILE_SIZE }}</li>
        <br>
        <li>Accesed: {{ ACCESS_TIME }}</li>
        <li>Modified: {{ MODIFY_TIME }}</li>
        <br>
        <li>Width: {{ IMAGE_WIDTH }}</li>
        <li>Height: {{ IMAGE_HEIGHT }}</li>
        <br>
        <li>User: {{ USER_ACCESS }}</li>
        <li>Group: {{ GROUP_ACCESS }}</li>
        <li>Others: {{ OTHERS_ACCESS }}</li>
        <br>
        <br>
        <li>Description:</li>
        <li>
            <input placeholder="Add description">
            </input>
        </li>
        <li>Tags:</li>
        <li>
            <input placeholder="Add tags separated by ','">
            </input>
        </li>
        <br>
        <li>
            <a href="{{ EDITOR_PATH }}">
                <button>edit</button>
            </a>
        </li>
    </ul>
</div>
<br class="clearBoth">
<span style="font-size: 14px; font-family: Helvetica">
    Color Distribution: <br>
    {% for clr, count in IMAGE_HISTOGRAM %} 
        <svg width="15" height="15">
            <rect width="20" height="20" style="fill:{{ clr }}"></rect>
        </svg>    
        {{ clr }}: {{ count }} %,&nbsp;&nbsp; 
    {% endfor %}
</span>
<script src="{{ JQUERY_JS }}"></script>
<script>
    var tooltip = $( '<div id="tooltip">' ).appendTo( 'body' )[0];
    $( '.coords' ).
        each(function () {
            var pos = $( this ).position(),
                top = pos.top,
                left = pos.left,
                width = $( this ).width(),
                height = $( this ).height();

            $( this ).
                mousemove(function ( e ) {
                    var x, y;

                    x = ( ( e.clientX - left ) ).toFixed( 0 ),
                    y = ( ( height - ( e.clientY - top ) ) ).toFixed( 0 );

                    $( tooltip ).text( x + ', ' + y ).css({
                        left: e.clientX - 30,
                        top: e.clientY - 30
                    }).show();
                }).
                mouseleave(function () {
                    $( tooltip ).hide();
                }); 
        });
</script>
